<template>
	<div class="app">
		<div class="header">
			<div>
				<p style="text-align: center">
					<span style="background-color: rgb(251, 233, 230); font-size: 19px"
						><strong>付费共享车队（重要）</strong></span
					>
				</p>
				<p style="text-align: left">
					<span style="background-color: rgb(231, 95, 51)"
						>车号T0字样的车，显示plus停运的车还可以 &nbsp; &nbsp; 切换 &nbsp; &nbsp;企业工作台使用
						&nbsp; 4.0 ！！！</span
					><br />以下车队为付费车队,用户可自由选择车号登陆。使用界面和官网一样。<br /><span
						style="background-color: rgb(231, 246, 213)"
						>车号带字母P:代表plus号，40次3小时，可使用gpts<br />车号带字母T:代表team号，企业工作台100次+个人工作台40次，切换才能使用140次。企业工作台可用gpts.<br />车号带字母B:代表可用4.0，不可用gpts.<br /></span
					><br />UserToken 请输入付费后发放的字符。
					您的会话将与其他用户隔离无需担心隐私被别人看到。<br />提示
					<br />1.不同车聊天记录不共享、不漫游，请记住自己的车号。当使用的共享车触发官网次数限制导致不能使用了，可以选择右上角“换车”切换未被限次的账号使用。
					<br />2.重要的聊天记录注意及时保存，车队后台换号后，记录找不回来。<br />3.共享所建的gpts会共享给其他人，在意gpts隐私的请慎重。gpts除外的其他功能带有会话隔离功能可保护隐私。
					<br />4.本站不能使用二次登录插件，官网个别插件需要登录第三方平台二次登录验证才可以安装使用，此类插件本站不支持使用。<br />5.登录时token不要带空格。<br />6.原token续费联系本站客服人员
				</p>
			</div>
		</div>
		<div class="content">
			<i-table :list="list">
				<template #tools="{item}">
					<button @click="doSwitch(item)">切换</button>
				</template>
			</i-table>
		</div>
	</div>
</template>
<script>
export default {
	name: "App",
	components: {
		ITable: httpVueLoader("/api/i-table.vue"),
	},
	props: {
		name: String,
	},
	data() {
		return {
			body: {
				account: "",
				passwd: "",
			},
			list: [],
		};
	},
	mounted() {
		this.refresh();
	},
	methods: {
		login() {
			postApi("/api/users/login", this.body).then((e) => {
				location.href = "/";
			});
		},
		refresh() {
			fetchApi("/api/chatgpt/car-list").then((e) => {
				this.list = e.list;
			});
		},
		doSwitch(item) {
			fetchApi("/api/chatgpt/switch?gid=" + item.id).then((e) => {
				location.href = "/";
			});
		},
	},
};
</script>
<style>
.app {
}
.i-loading {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.5);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #000;
}
.i-loading > img {
	width: 30px;
	height: 30px;
	animation: loading 1s linear infinite;
}
.userinfo {
	display: flex;
	align-items: center;
}
.avatar {
	width: 50px;
	height: 50px;
	margin-right: 10px;
}
.actions {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

button {
	padding: 6px 12px;
}

button + button {
	margin-left: 20px;
}

textarea {
	width: 98%;
	padding: 4px;
}

img {
	max-width: 50vw;
	max-height: 250px;
}
</style>
